<template>
  <div class="list">
    <ul>
      <li @click="detailsChange(v)" v-for="(v, i) in obj" :key="i">
        <img :src="v.author.avatar_url" alt="" />
        <div>
          <p>{{ v.title }}</p>
          <p>{{ diaplayTime(v.last_reply_at) }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props: { obj: Object },
  setup(props, { emit }) {
    function detailsChange(v) {
      emit("detailsChange", v);
    }

    function diaplayTime(data) {
      //将字符串转换成时间格式
      let result;
      let timePublish = new Date(data);
      let timeNow = new Date();
      let minute = 1000 * 60;
      let hour = minute * 60;
      let day = hour * 24;
      let month = day * 30;
      let year = month * 12;
      let diffValue = timeNow - timePublish;
      let diffMonth = diffValue / month;
      let diffWeek = diffValue / (7 * day);
      let diffDay = diffValue / day;
      let diffHour = diffValue / hour;
      let diffMinute = diffValue / minute;
      let diffYear = diffValue / year;
      if (diffValue < minute) {
        result = "刚刚发表";
      } else if (diffYear > 1) {
        result = parseInt(diffYear) + "年前";
      } else if (diffMonth > 1) {
        result = parseInt(diffMonth) + "月前";
      } else if (diffWeek > 1) {
        result = parseInt(diffWeek) + "周前";
      } else if (diffDay > 1) {
        result = parseInt(diffDay) + "天前";
      } else if (diffHour > 1) {
        result = parseInt(diffHour) + "小时前";
      } else if (diffMinute > 1) {
        result = parseInt(diffMinute) + "分钟前";
      } else {
        result = "刚刚发表";
      }
      return result;
    }
    return { detailsChange, diaplayTime };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  height: 100%;
  ul {
    width: 100%;
    li {
      width: 100%;
      height: 40px;
      font-size: 12px;
      background-color: rgb(180, 224, 230);
      display: flex;
      margin: 2px 0;
      img {
        width: 50px;
        height: 100%;
      }
    }
  }
}
</style>
